<template>
    <div class="p-20 p-t-0">
        <div class="table-search" style="width: 100%">
            <el-row :gutter="20">
              <el-col :span="6">
                <div class="el-input el-input-group el-input-group--prepend">
                  <div class="el-input-group__prepend">菜品库</div>
                  <el-select v-model="typeSearch" style="width:100%" placeholder="请选择菜品库" size="medium" @change="changeType">
                    <el-option
                      v-for="item in stores"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </div>
              </el-col>
                <el-col :span="6">
                    <el-input v-model="input" @keyup.enter.native="keyDown($event)" placeholder="根据商品名称检索" :maxlength="20" size="medium">
                        <template slot="prepend">
                            <el-button tabIndex="-1">商品信息</el-button>
                        </template>
                    </el-input>
                </el-col>
                <el-col :span="6">
                    <el-input v-model="material" @keyup.enter.native="keyDown($event)" placeholder="请输入原料名称" :maxlength="20" size="medium">
                        <template slot="prepend">
                            <el-button tabIndex="-1">原料</el-button>
                        </template>
                    </el-input>
                </el-col>
                 <!--<el-col :span="6">-->
                     <!--<div class="el-input el-input-group el-input-group&#45;&#45;prepend el-input&#45;&#45;medium">-->
                        <!--<div class="el-input-group__prepend">-->
                            <!--<el-button tabIndex="-1">是否包含成本卡</el-button>-->
                        <!--</div>-->
                        <!--<el-select v-model="hasCosts" placeholder="请选择" style="width:100%">-->
                            <!--<el-option label="全部" value=""></el-option>-->
                            <!--<el-option label="是" value="true"></el-option>-->
                            <!--<el-option label="否" value="false"></el-option>-->
                        <!--</el-select>-->
                    <!--</div>-->
                <!--</el-col>-->
                <el-col :span="6">
                    <el-button  class="btn-info"  icon="el-icon-search" @click="search" size="medium">搜索</el-button>
                    <el-button  class="btn-warning" style="margin-left: 1px"  icon="el-icon-refresh" @click="cleanSearch" size="medium">重置</el-button>
                </el-col>
            </el-row>
        </div>
        <div class="table-padding p-t-20">
            <el-table
                 v-loading="loading"
                 :data="tableData"
                 :border="true"
                 style="width: 100%">
                <el-table-column
                   type="index"
                   width="50">
                 </el-table-column>

                <el-table-column
                        label="商品编码">
                    <template scope="scope">
                        <span>{{scope.row.dishes_no}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="商品名称">
                    <template scope="scope">
                        <span>{{scope.row.dishes_name}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="价格">
                    <template scope="scope">
                        <span>{{scope.row.dishes_price | money }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="会员价">
                    <template scope="scope">
                        <span>{{scope.row.vip_price | money}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="成本价">
                    <template scope="scope">
                        <span>{{scope.row.cost | money }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="规格">
                    <template scope="scope">
                        <span>{{scope.row.spec_name }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="操作" width="280">
                    <template scope="scope" >
                        <router-link :to="'/storeMaterialCosts/update?id='+scope.row.spec_id+'&type=1&dishesId='+scope.row.dishes_id+'&storeId='+scope.row.store_id" v-if="scope.row.mcId">
                          <el-button type="text" size="small" style="margin: 0px;"  >查看 | </el-button>
                        </router-link>
                            <router-link v-hasPermission="'management_materialCost:create'" :to="'/storeMaterialCosts/add?id='+scope.row.spec_id+'&dishesId='+scope.row.dishes_id+'&storeId='+scope.row.store_id" v-if="scope.row.mcId==null">
                              <el-button type="text" size="small" style="margin: 0px;"  >添加成本卡</el-button>
                            </router-link>
                            <router-link v-hasPermission="'management_materialCost:create'"  :to="'/storeMaterialCosts/update?id='+scope.row.spec_id+'&dishesId='+scope.row.dishes_id+'&storeId='+scope.row.store_id"  v-if="scope.row.mcId">
                              <el-button type="text" size="small" style="margin: 0px;"  >编辑成本卡</el-button>
                            </router-link>

                             <el-button v-hasPermission="'management_materialCost:destory'"  @click="handleDelete(scope.$index, scope.row)"
                                        v-if="scope.row.mcId"
                                        type="text" size="small"
                                        > | 删除</el-button>
                    </template>
                </el-table-column>
                 <!--<el-table-column
                         label="查看" width="70" >
                     <template scope="scope">

                     </template>
                 </el-table-column>
                 <el-table-column
                          label="删除" width="70">
                      <template scope="scope">
                        <span class="icon icon-shanchu-copy table-icon" @click="handleDelete(scope.$index, scope.row)"></span>
                      </template>
                 </el-table-column>-->
            </el-table>
            <br>
            <div class="block">
                <el-row>
                    <el-col :span="24" class="text-right">
                       <el-pagination
                               @size-change="handleSizeChange"
                               @current-change="handleCurrentChange"
                               :current-page="currentPage"
                               :page-sizes="pageSizeSet"
                               :page-size="pageSize"
                               layout="total, sizes, prev, pager, next, jumper"
                               :total="total">
                       </el-pagination>
                    </el-col>
                </el-row>
            </div>
        </div>

        <PluginConfirm
                :show="dialogIsShow"
                @chooseSure="chooseSure()"
                @chooseCancel="chooseCancel()"
                @dialogResult="dialogResult">
        </PluginConfirm>
    </div>
</template>
<script>

    //注意路径
    export default{
        data(){
            return {
              stores:[],
              typeSearch:"",
                tableData: [],
                loading:false,
                pageSizeSet:window.pageSizes,
                pageSize:window.pageSize,
                currentPage:1,
                input:"",
                material:"",
                inputValue:"",
                total:0,
                searchValue:"",
                hasCosts:"",
                dialogIsShow:false,
                curDataRow:null,
                curDataIndex:0,
              allData:[]
            }
        },
        created(){
            window.this = this;
            this.initData();
        },
        components: {

        },
        methods: {
          changeType(){
            this.tableData=[];
              for(var i=0;i<this.allData.length;i++){
                if(this.typeSearch==this.allData[i].store_id){
                  this.tableData.push(this.allData[i]);
                }
                if(this.typeSearch==''){
                  this.tableData=this.allData;
                }
              }
          },
            initData(){
                this.loading=true;
                this.currentPage=1;
                this.getData();
            },
            keyDown(ev){
                if(ev.keyCode==13) {
                    this.currentPage=1;
                    this.searchValue="&search.storeId_eq="+this.typeSearch+"&search.dName_eq="+this.input+"&search.mName_eq="+this.material;
                    this.getData();
                }
            },
            cleanSearch(){
                this.currentPage=1;
                this.input="";
                this.material="";
                this.typeSearch="";
              this.searchValue="&search.storeId_eq="+this.typeSearch+"&search.dName_eq="+this.input+"&search.mName_eq="+this.material;
                this.getData();
            },
            search(){
                this.currentPage=1;
              this.searchValue="&search.storeId_eq="+this.typeSearch+"&search.dName_eq="+this.input+"&search.mName_eq="+this.material;
                this.getData();

            },
            handleCurrentChange(currentPage){
                this.currentPage=currentPage;
                this.getData();
            },
            getData(){
              this.loading=false;
                this.$axios.get("branchstores/materialCosts?page.pn="+this.currentPage+"&page.size="+this.pageSize+this.searchValue).then((data)=>{
                    if(data.status==200){
                      data.content.stores.splice(0,0,{name:"全部",id:""});
                      this.stores=data.content.stores;
                      this.allData=data.content.materialCostPage.content;
                        this.tableData=data.content.materialCostPage.content;
                        this.total=data.content.materialCostPage.totalElements;
                        this.loading=false
                    }else{
                        this.loading=false
                    }
                })
            },
            /*用户选择提示框后处理*/
            dialogResult(param){
                this.dialogIsShow=param.close;
                if(param.choose==="ok"){
                    //console.log("确定");
                    var params = "";

                  params = "&storeId="+this.curDataRow.store_id;
                    if(this.curDataRow.spec_id!=null){
                      params+="&specId="+this.curDataRow.spec_id;
                    }


                    this.$axios.delete("branchstores/materialCosts/destory?id="+this.curDataRow.dishes_id+params).then(data=>{
                        if(data.status==200){
                            this.tableData.splice(this.curDataIndex,1);
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.initData();
                        }else{
                            this.$message({
                                type: 'error',
                                message: data.message
                            });
                        }
                    })
                }else if(param.choose==="cancel"){
                    //console.log("取消");
                }else{
                    //console.log("不做处理");
                }
            },
            handleDelete(index, row) {
                this.curDataIndex = index;
                this.curDataRow = row;
                this.dialogIsShow = true;
                return false;

                console.log(index, row);
                this.$confirm('您确定删除此数据?', '提示', {
                    confirmButtonText: '取消',
                    cancelButtonText: '确定',
                    type: 'warning',
                    showClose:false,
                    cancelButtonClass:"deleteCancel",
                    confirmButtonClass:"deleteConfirm",
                    showClose:false
                }).then(() => {

                }).catch(() => {
                    if(row.specId==null){
                        row.specId="";
                    }
                    this.$http.get("materialCosts/destory?id="+row.id+"&specId="+row.specId).then(data=>{
                        if(data.body.status==200){
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.getData();
                        }else{
                            this.$message({
                                type: 'error',
                               message: data.body.message
                            });
                        }
                    })
                });

            },
            handleSizeChange(val){
                this.pageSize=val;
                this.getData();
            },

        }
    }
</script>
<style scoped>
    .seaTitle{
        line-height: 35px;
        text-align: right !important;
    }
    .el-button--text{
        color: #0a8cd2;
    }
</style>
